<script setup>

import MyNav from "../../../../components/MyNav.vue";
import MyHead from "../../../../components/MyHead.vue";
import MyTable from "../../../../components/MyTable.vue";
import MyPager from "../../../../components/MyPager.vue";
import { onMounted, reactive, ref } from "vue";
import { deleteApi, deleteBatchApi, pageApi } from "../../../../api/axios.js";
import { isNotEmpty, isNotNull } from "../../../../util/index.js";
import { myPage } from "../../../../util/request.js";
import { notYet } from "../../../../util/index.js";

// 当前父评论ID和评论名称
let pid = sessionStorage.getItem('pid');
let pNickname = sessionStorage.getItem('pNickname');
let fkEpisodeId = sessionStorage.getItem('fkEpisodeId');
// 页面常量
// 路径导航
const navItems = [
  { icon: 'User', label: '课程管理' },
  { icon: 'Flag', label: '评论列表（一级评论）', url: '/Comment' },
  { icon: 'Flag', label: '评论列表（二级评论）' },
];

// 页面头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '按视频集ID搜索', callback: pageByEpisodeId},
  {type: 'ipt', span: 5, placeholder: '按评论人ID搜索', callback: pageByUserId},
];

// 表格列
const columns = [
  {label: '被评论视频', prop: 'episode.title'},
  {label: '评论人昵称', prop: 'nickname'},
  {label: '评论内容', prop: 'content', type: 'card', width: 500, tooltip: false},
];

// 表格行 + 分页 + 评论标题
let records = ref([]);
let pageInfo = reactive({ pageNum: 1, pageSize: 5, callback: page });
let episodeId = ref();
let userId = ref();

/**
 * 分页查询记录
 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。
 * 2. 附加分页查询条件，如标题等。
 * 3. 异步发送分页查询请求。
 * 4. 将 pTitle 融入表格数据的每一项，方便进行展示。
 * @param pageNum 当前第几页，默认 1
 * @param pageSize 每页多少条，默认 5
 */
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    records, pageInfo,
    api: pageApi,
    params: { pageNum, pageSize, pid },
    args: { module: 'comment' },
  };
  if (isNotEmpty(episodeId.value)) config['params']['fkEpisodeId'] = episodeId.value;
  if (isNotEmpty(userId.value)) config['params']['fkUserId'] = userId.value;
  await myPage(config);
  /*Object.values(records.value)
      .forEach(comment => comment['title'] = `${pTitle} / ${comment['title']}`);*/
}

/**
 * 按评论标题模糊查询
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 * @param val 输入框中的值
 */
function pageByEpisodeId(val) {
  if (isNotNull(val) || episodeId.value) {
    episodeId.value = val;
    page();
  }
}

function pageByUserId(val) {
  if (isNotNull(val) || userId.value) {
    userId.value = val;
    page();
  }
}

/**
 * 加载函数
 */
onMounted(() => page());
</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="comment"
            insert-page="/SubCommentInsert"
            update-page="/SubCommentUpdate"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :excel-api="notYet"
            :records="records"
            :columns="columns"/>

  <my-pager :page-info="pageInfo"/>
</template>

<style scoped lang="scss">
</style>